import React, {useEffect} from "react";
import './TestPage.css';
//引入测试组件
import {Test} from "../../components/Test";
import type { FormProps } from 'antd';
import { Button, Checkbox, Form, Input } from 'antd';

//引入useImmer：Immer是一个非常流行的库，它可以让你使用简便但可以直接修改的语法编写代码，并会帮你处理好复制的过程。
// 通过使用 Immer，你写出的代码看起来就像是你“打破了规则”而直接修改了对象：
import { useImmer } from 'use-immer';

//定义用户数据
type FieldType = {
    name?: string;
    age?: number
    city?: string;
    remember?: Boolean;
    info?: {
        phone?: string
    }
};

/**
 *  表单提交
 * @param values
 */
const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
    console.log('Success:', values);
};

/**
 *  表单提交失败
 * @param errorInfo
 */
const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
    console.log('Failed:', errorInfo);
};

//定义测试页面
const TestPage: React.FC = () => {
    // 1. 使用 Form.useForm() 创建表单实例
    const [form] = Form.useForm();

    // 2. 使用 useImmer() 创建表单数据
    const [formData,setFormData] = useImmer({
        name: 'lixueya',
        age: 18,
        city: '重庆',
        remember: false,
        info:{
            phone: '17815272971',
        }
    })

    // 在组件挂载后，将数据回显到表单
    useEffect(() => {
        // 使用 setFieldsValue 方法设置表单的值
        form.setFieldsValue(formData);
    }, [form, formData]); // 依赖项数组确保只在初次渲染时设置

    /**
     *  表单的手机号码改变事件
     * @param e
     */
    const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setFormData(draft => {
            draft.info.phone = e.target.value;
        })
    }

    return (
        <div className="testPage">
            <Test name="张三"/>
            <Form form={form} name="basic" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} style={{ maxWidth: 600,marginTop:20 }}
                onFinish={onFinish} onFinishFailed={onFinishFailed} autoComplete="off">
                {/*姓名*/}
                <Form.Item<FieldType> label="姓名" name="name" rules={[{ required: true, message: '姓名不能为空!' }]}>
                    <Input />
                </Form.Item>
                {/*年龄*/}
                <Form.Item<FieldType> label="年龄" name="age" rules={[{ required: true, message: '输入你的年龄!' }]}>
                    <Input />
                </Form.Item>
                {/*手机号码*/}
                <Form.Item<FieldType> label="手机号码" name={["info", "phone"]} rules={[{ required: true, message: '手机号码!' }]} >
                    <Input onChange={handlePhoneChange} />
                </Form.Item>
                {/*记住我状态*/}
                <Form.Item<FieldType> name="remember" valuePropName="checked" label={null}>
                    <Checkbox>Remember me</Checkbox>
                </Form.Item>
                {/*提交按钮*/}
                <Form.Item label={null}>
                    <Button type="primary" htmlType="submit">
                        Submit
                    </Button>
                </Form.Item>
            </Form>
        </div>
    );
};

//导出
export default TestPage;
